<!DOCTYPE html>
<html >

<head>

    <title>Yuan | City</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="../css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
    <link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link rel="stylesheet" href="../css/susu.css" type="text/css">
    <link rel="stylesheet" href="../css/susu.css" type="text/css">
    <!-- 登录-->
    <link rel="stylesheet" href="../css/login.css">
<!--    <link rel="stylesheet" href="../css/font_43459_lbtux0zjkr6yldi.css">-->
    <!-- Js Plugins -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/jquery.countdown.min.js"></script>
    <script src="../js/jquery.nice-select.min.js"></script>
    <script src="../js/jquery.zoom.min.js"></script>
    <script src="../js/jquery.dd.min.js"></script>
    <script src="../js/jquery.slicknav.js"></script>
    <script src="../js/owl.carousel.min.js"></script>

</head>

<body>
<!-- Page Preloder -->
<!--    <div id="preloder">-->
<!--        <div class="loader"></div>-->
<!--    </div>-->

<!--头部引入-->
<div class="su_head ">
</div>

<br />

<div id="main" class="main-warp">
    <div class="main-content">
        <div class="formDiv">
            <h2 class="text-center">登录</h2>
            <form id="loginForm" >
                <div class="dataform">
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-yonghu1"></span>
                        <input id="userAccount" name="userAccount" type="text" class="inputs" placeholder="手机号码或邮箱" maxlength="64">
                    </div>
                    <div class="error-content">
                        <span id="userNameErr" class="errMsg"></span>
                    </div>
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input class="inputs" type="password" name="userPassword" placeholder="密码" id="userPassword" maxlength="20">
                    </div>
                    <div class="error-content">
                        <span id="passwordErr" class="errMsg"></span>
                    </div>
                    <div class="form-item">
                        <div class="input-warp gap">
                            <div class="row">
                                <div class="col-md-7">
                                    <span class="input-icon iconfont icon-yanzhengma"></span>
                                    <input id="verifycode" name="verifycode" placeholder="验证码" type="text" class="inputs" value="">
                                </div>
                                <div class="col-md-5">
                                    <div id="popup-captcha"  class="pull-right">  <img src="/city/v1/getCaptcha" alt="" class="code-verify" style="height: 25px;width: 140px;"></div>
                                </div>
                            </div>
                          </div>
                        <div>

                        </div>
                    </div>

                    <div class="btn-warp gap">
                        <div class="text-center">
                            <input type="hidden" value="jsform" id="_app">
                            <button type="button" id="btnLogin" class="btn btn-block lgbtn blue">登录</button>
                        </div>
                    </div>
                    <div class="gap">
                        <div class="pull-right" style="margin-top: 6px"><a href="javascript:;" class="link">忘记密码</a><span class="split-space">|</span><a href="register.html" class="link">新用户注册</a></div>
                        <div class="pretty-box">
                            <input type="checkbox" value="1" name="REMEMBER" id="remember" class="">
                            <label for="remember" style="font-weight: normal">记住我</label>
                        </div>
                    </div>
                    <div class="biggap third-party-title">
                        <h5 class="text-center"><span>第三方账号登录</span></h5>
                    </div>
                    <div class="third-auth">
                        <a title="用钉钉登录" class="dt" href="javascript:;"></a>
                        <a title="用微信账户登录" class="wx" href="javascript:;"></a>
                        <a title="用QQ账户登录" class="qq" href="javascript:;"></a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Footer Section Begin -->
    <footer class="footer-section" style="margin-top: 90px">
        <div class="copyright-reserved container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="copyright-text" style="text-align: center;">
                        Copyright &copy;<script>document.write(new Date().getFullYear());</script> Yuan City
                    </div>
                </div>

            </div>
        </div>
    </footer>
    <!-- Footer Section End -->

</div>





<script type="text/javascript">


    //调用公共头部
    $('.su_head').load('head.html');
    //获取导航栏信息
    $(document).ready(function (){
        $.ajax({
            type: 'get',
            url: '/ayuancity/categorys/getcategoryAndtype',
            success: function (res) {
                // console.log( $('.su_nav').text())
                for (let i=0;i<res.content.data.length;i++) {

                    let nav = res.content.data[i];
                    var category =
                        `
							<li id="${nav.categoryName}">
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
                    var drop='';
                    var type='';
                    if (nav.types.length > 0) {
                        drop =  ` <ul class="dropdown "  >`
                        for (let j = 0; j < nav.types.length; j++) {
                            type = type+ `<li ><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

                        }
                        type=type+ `</ul>`
                    }
                    var template= category+ drop+type+ ` </li>`;
                    $('.su_nav').append(template);

                }
                // console.log($('.su_head').text());
            }

        });

    })
   //验证码更新
    $('.code-verify').click(function (){
        this.src = '/city/v1/getCaptcha?r=' + Math.random();
    });
   //登录
    $('#btnLogin').click(function () {
        $.ajax({
            type: 'post',
            url: '/city/user/login',
            data: {
                userAccount: $('#userAccount').val(),
                userPassword: $('#userPassword').val(),
                code: $('#verifycode').val()
            },
            success: function (json) {
                console.log(json)
                if (json.success) {
                    sessionStorage.setItem('citytoken', json.content.token);
                    location.href = 'index.html';
                } else {
                    alert(json.message);
                    location.href = 'login.html';
                }
            }
        });
    });


</script>




<script src="../js/main.js"></script>


</body>

</html>